﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductDetail.aspx.cs"
    Inherits="Maticsoft.Web.ProductDetail" %>

<%@ Register Src="Header.ascx" TagName="Header" TagPrefix="uc1" %>
<%@ Register Src="footer.ascx" TagName="footer" TagPrefix="uc2" %>
<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="/img/icon.png" rel="icon" type="images/png" sizes="16*16" />
    <title>商品详情</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/common.css" />
    <script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
    <script type="text/javascript">
        function AddNum(i) {
            var n = $("#txtNum").val();
            var num = parseInt(i) + parseInt(n);
            if (num > 0) {
                $("#txtNum").val(num);
            }
            else {
                $("#txtNum").val("1");
            }
        }

        function Buy() {
            window.location.href = "ShoppingCar.aspx?d=" + new Date().toString();
        }

        function AddShoppingCar(op) {
            if ($(".layout").length == 0) {
                alert("请选择规格");
                return;
            }

            $.ajax({
                type: "get",
                url: "ProductDetail.aspx",
                data: "ope=addnum&productId=" + $("#hidProductId").val() + "&num=" + $("#txtNum").val() + "&lay=" + escape($(".layout").text()) + "&d=" + new Date().toString(),
                success: function (data) {
                    if (data == "1") {
                        if (op == "1") {
                            Buy();
                            return;
                        }
                        alert("添加成功");
                    }
                    else if (data == "-1") {
                        alert("产品已下架");
                    }
                    else if (data == "-2") {
                        alert("库存不足");
                    }
                    else if (data == "-3") {
                        alert("超出购买限额");
                    }
                    else if (data == "-4") {
                        alert("超出购买限额");
                    }
                    else if (data == "-5") {
                        alert("请先登录");
                    }
                    else {
                        alert("添加失败");
                    }
                },
                error: function () {
                    alert("出错啦");
                }
            })
        }

        function SelectLayout(obj) {
            $(".des-stand button").removeClass("layout");
            $(".des-stand button").css("border", "");
//            if ($(obj).css("border") == "2px solid rgb(228, 57, 60)") {
//                $(obj).css("border", "");
//                $(obj).removeClass("layout");
//            }
//            else {
//                $(obj).css("border", "2px solid #E4393C");
//                $(obj).addClass("layout");
            //            }
            $(obj).addClass("layout");
            $(obj).css("border", "2px solid #E4393C");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <uc1:Header ID="Header1" runat="server" />
    <div class="row bg-garay mar-btm-20">
        <div class="safe_width">
            <div class="adr-box">
                <a href="default.aspx" class="fs-14">首页</a><%=nav %>
            </div>
        </div>
    </div>
    <div class="row bg-white mar-btm-20">
        <div class="safe_width">
            <div class="borderbox pad-10">
                <div class="preview">
                    <div id="vertical" class="bigImg">
                        <img src="" width="400" height="400" alt="" id="midimg" runat="server" />
                        <div style="display: none;" id="winSelector">
                        </div>
                    </div>
                    <!--bigImg end-->
                    <div class="smallImg">
                        <div class="scrollbutton smallImgUp disabled">
                        </div>
                        <div id="imageMenu">
                            <ul>
                                <asp:Repeater ID="rptSmallPic" runat="server">
                                <ItemTemplate>
                                <li>
                                    <img src="uploadpic/<%#Eval("Url").ToString().Substring(0,Eval("Url").ToString().IndexOf("."))+"_s." + Eval("Url").ToString().Substring(Eval("Url").ToString().IndexOf(".")+1,3) %>" alt="" /></li>
                                </ItemTemplate>
                                </asp:Repeater>
                            </ul>
                        </div>
                        <div class="scrollbutton smallImgDown">
                        </div>
                    </div>
                    <!--smallImg end-->
                    <div id="bigView" style="display: none;">
                        <img width="800" height="800" alt="" src="" /></div>
                </div>
                <div class="infor">
                    <p class="good-name">
                        <%=proModel.ProductName %><input id="hidProductId" type="hidden" value="<%=Request.QueryString["id"] %>" /></p>
                    <div class="good-des">
                        <ul>
                            <li>
                                <p class="des-mes">
                                    价格</p>
                                <p class="des-price">
                                    <span class="fs-16">￥</span><%=((decimal)proModel.SalePrice).ToString("f2") %></p>
                            </li>
                            <li>
                                <p class="des-mes">
                                    编号</p>
                                <p class="des-con">
                                    <%=proModel.ProductNo %></p>
                            </li>
                            <%if (proModel.Weight > 0)
                              {%>
                            <li>
                                <p class="des-mes">
                                    商品重量</p>
                                <p class="des-con">
                                    <%=proModel.Weight + "克"%></p>
                            </li>
                            <%} %>
                            <li>
                                <p class="des-mes">
                                    规格</p>
                                <p class="des-stand">
                                    <%
                                        string layout = proModel.Layout;
                                        if (!string.IsNullOrEmpty(layout))
                                        {
                                            string[] arr = layout.Split('|');
                                            foreach (string s in arr)
                                            {
                                                Response.Write("<button type='button' style='padding:2px 6px;' onclick='SelectLayout(this);'><label> " + s + " </label></button>");
                                            }
                                        }
                                    %>
                                </p>
                            </li>
                            <li>
                                <p class="des-mes">
                                    产地</p>
                                <p class="des-con">
                                    <%=proModel.Publisher %></p>
                            </li>
                            <li>
                                <p class="des-mes">
                                    仓储地</p>
                                <p class="des-con">
                                    <%=proModel.Storer %></p>
                            </li>
                            <li>
                                <p class="des-mes">
                                    数量</p>
                                <p class="des-no">
                                    <button class="btn minus" type="button" onclick="AddNum(-1);">
                                        -</button>
                                    <input type="text" value="1" class="number" id="txtNum" />
                                    <button class="btn plus" type="button" onclick="AddNum(1)">
                                        +</button>
                                </p>
                            </li>
                            <li>
                                <p class="des-mes">
                                </p>
                                <p class="des-buy">
                                    <button class="buy-now" type="button" onclick="AddShoppingCar('1');">
                                        立即购买</button>
                                    <button class="shop-car" type="button" onclick="AddShoppingCar('0');">
                                        <img src="img/icons-shop-car.png">加入购物车</button>
                                    <!--<button class="share-good">
                                        <img src="img/icon-share-goos.png">分享商品</button>-->
                                        <div class="bdsharebuttonbox" style="margin-left:90px"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a><a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
<script>    window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row bg-white  mar-btm-20">
        <div class="safe_width">
            <div class="borderbox">
                <div class="bordertop">
                    你可能喜爱的产品
                </div>
                <div class="border-good">
                    <asp:Repeater ID="rptHotProduct" runat="server">
                    <ItemTemplate>
                    <div class="good-box">
                        <div class="good-img">
                            <a href="ProductDetail.aspx?cid=<%#Eval("categoryId") %>&id=<%#Eval("productId") %>"><img src="uploadpic/<%#Eval("pic") %>"></a>
                        </div>
                        <div class="good-des">
                            <p class="good-name">
                                <%#Eval("ProductName") %></p>
                            <div class="goods-buy">
                                <p class="fl">
                                    <span class="fs-16">￥</span><%#Convert.ToDecimal(Eval("SalePrice")).ToString("f2") %></p>
                            </div>
                        </div>
                    </div>
                    </ItemTemplate>
                    </asp:Repeater>
                    
                    
                </div>
            </div>
        </div>
    </div>
    <div class="row bg-white">
        <div class="safe_width">
            <div class="borderbox tou-reco">
                <div class="bordertop">
                    浏览记录
                </div>
                <div class="border-good">
                    <asp:Repeater ID="rptHistory" runat="server">
                    <ItemTemplate>
                    <div class="good-box">
                        <div class="good-img">
                            <a href="ProductDetail.aspx?cid=<%#Eval("categoryId") %>&id=<%#Eval("productId") %>"><img src="uploadpic/<%#Eval("pic") %>"></a>
                        </div>
                        <div class="good-des">
                            <p class="good-name">
                                <%#Eval("ProductName") %></p>
                            <div class="goods-buy">
                                <p class="fl">
                                    <span class="fs-16">￥</span><%#Convert.ToDecimal(Eval("SalePrice")).ToString("f2") %></p>
                            </div>
                        </div>
                    </div>
                    </ItemTemplate>
                    </asp:Repeater>
                </div>
            </div>
            <div class="borderbox" style="width: 77.6%; float: right; box-sizing: border-box;">
                <div class="bordertop">
                    <a class="tab-a <%=(Request.QueryString["v"]=="d" || string.IsNullOrEmpty(Request.QueryString["v"])) ? "active" : "" %>" href="ProductDetail.aspx?cid=<%=cid %>&id=<%=pid %>&v=d#tips">商品介绍</a> <a class="tab-a <%=Request.QueryString["v"]=="c" ? "active" : "" %>" href="ProductDetail.aspx?cid=<%=cid %>&id=<%=pid %>&v=c#tips">商品评价(<asp:Literal ID="ltlCount"
                        runat="server"></asp:Literal>)</a><a href="" name="tips"></a>
                </div>
                <div class="border-good">
                <%if (Request.QueryString["v"] == "c")
                  { %>
                    <div class="eval-list" runat="server" id="divComment">
                        <asp:Repeater ID="rptComments" runat="server">
                        <ItemTemplate>
                            <div class="eval-indent">
                            <div class="eval-left">
                                <div class="eval-star">
                                    <%#GetStar(Eval("Point")) %>
                                </div>
                                <p class="eval-time">
                                    <%#DateTime.Parse(Eval("CreateTime").ToString()).ToString("yyyy-MM-dd HH:mm")%></p>
                                <!--<p class="eval-good">
                                    颜色：粉色</p>-->
                            </div>
                            <div class="eval-right">
                                <div class="buyers-mes">
                                    <!--<i>
                                        <img src="img/eval-level.png"></i>-->
                                    <p class="buyers-name">
                                        <%#Eval("NickName")%></p>
                                    <p class="buyers-level-name">
                                        <%#Eval("LevelName")%></p>
                                </div>
                                <div class="buyers-eval">
                                    <%#Eval("Detail")%>
                                </div>
                            </div>
                        </div>
                        </ItemTemplate>
                        </asp:Repeater>
                        <div class="page-no" style="padding: 30px 0;">
                            <webdiyer:aspnetpager id="AspNetPager1" cssclass="pages" currentpagebuttonclass="cpb"
                                runat="server" urlpaging="true" horizontalalign="center" pagesize="8" enabletheming="true"
                                onpagechanging="AspNetPager1_PageChanging">
                            </webdiyer:aspnetpager>
                        </div>
                    </div>
                    <%}
                  else
                  {%>
                    <div class="goodbox-img" style="line-height:25px" runat="server" id="divDetail">
                        <!--<div class="goods-mes">
                            <ul>
                                <li>品牌: GIOBAI BOWEN BEAR 柏文熊</li>
                                <li>型号: a201410281</li>
                                <li>货号: a201410281</li>
                                <li>玩偶种类: 熊熊</li>
                                <li>适用年龄: 3岁 4岁 5岁 6岁 7岁 8岁 9岁 10岁以上</li>
                                <li>卡通角色: Teddy Bear/泰迪熊</li>
                                <li>泰迪熊类型: 单熊 </li>
                                <li>玩具类型: 公仔</li>
                                <li>版本类型: 原装正版</li>
                                <li>材质: 毛绒</li>
                                <li>填充物: PP棉</li>
                                <li></li>
                            </ul>
                        </div>
                        <div class="imgbox">
                            <img src="img/good-img-001 (1).jpg">
                            <img src="img/good-img-001 (2).jpg">
                        </div>-->
                        <%=proModel.Detail %>
                    </div>
                    <%} %>
                </div>
            </div>
        </div>
    </div>
    <uc2:footer ID="footer1" runat="server" />
    </form>
    <script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // 图片上下滚动
            var count = $("#imageMenu li").length - 5; /* 显示 6 个 li标签内容 */
            var interval = $("#imageMenu li:first").width();
            var curIndex = 0;

            $('.scrollbutton').click(function () {
                if ($(this).hasClass('disabled')) return false;

                if ($(this).hasClass('smallImgUp')) --curIndex;
                else ++curIndex;

                $('.scrollbutton').removeClass('disabled');
                if (curIndex == 0) $('.smallImgUp').addClass('disabled');
                if (curIndex == count - 1) $('.smallImgDown').addClass('disabled');

                $("#imageMenu ul").stop(false, true).animate({
                    "marginLeft": -curIndex * interval + "px"
                }, 600);
            });
            // 解决 ie6 select框 问题
            $.fn.decorateIframe = function (options) {
                if ($.browser.msie && $.browser.version < 7) {
                    var opts = $.extend({}, $.fn.decorateIframe.defaults, options);
                    $(this).each(function () {
                        var $myThis = $(this);
                        //创建一个IFRAME
                        var divIframe = $("<iframe />");
                        divIframe.attr("id", opts.iframeId);
                        divIframe.css("position", "absolute");
                        divIframe.css("display", "none");
                        divIframe.css("display", "block");
                        divIframe.css("z-index", opts.iframeZIndex);
                        divIframe.css("border");
                        divIframe.css("top", "0");
                        divIframe.css("left", "0");
                        if (opts.width == 0) {
                            divIframe.css("width", $myThis.width() + parseInt($myThis.css("padding")) * 2 + "px");
                        }
                        if (opts.height == 0) {
                            divIframe.css("height", $myThis.height() + parseInt($myThis.css("padding")) * 2 + "px");
                        }
                        divIframe.css("filter", "mask(color=#fff)");
                        $myThis.append(divIframe);
                    });
                }
            }
            $.fn.decorateIframe.defaults = {
                iframeId: "decorateIframe1",
                iframeZIndex: -1,
                width: 0,
                height: 0
            }
            //放大镜视窗
            $("#bigView").decorateIframe();
            //点击到中图
            var midChangeHandler = null;

            $("#imageMenu li img").bind("click", function () {
                if ($(this).attr("id") != "onlickImg") {
                    midChange($(this).attr("src").replace("_s", "_m"));
                    $("#imageMenu li").removeAttr("id");
                    $(this).parent().attr("id", "onlickImg");
                }
            }).bind("mouseover", function () {
                if ($(this).attr("id") != "onlickImg") {
                    window.clearTimeout(midChangeHandler);
                    midChange($(this).attr("src").replace("_s", "_m"));
                    $(this).css({
                        "border": "3px solid #e4393c",
                        "margin": "0"
                    });
                }
            }).bind("mouseout", function () {
                if ($(this).attr("id") != "onlickImg") {
                    $(this).removeAttr("style");
                    midChangeHandler = window.setTimeout(function () {
                        midChange($("#onlickImg img").attr("src").replace("_s", "_m"));
                    }, 1000);
                }
            });

            function midChange(src) {
                $("#midimg").attr("src", src).load(function () {
                    changeViewImg();
                });
            }
            //大视窗看图
            function mouseover(e) {
                if ($("#winSelector").css("display") == "none") {
                    $("#winSelector,#bigView").show();
                }
                $("#winSelector").css(fixedPosition(e));
                e.stopPropagation();
            }

            function mouseOut(e) {
                if ($("#winSelector").css("display") != "none") {
                    $("#winSelector,#bigView").hide();
                }
                e.stopPropagation();
            }
            $("#midimg").mouseover(mouseover); //中图事件
            $("#midimg,#winSelector").mousemove(mouseover).mouseout(mouseOut); //选择器事件

            var $divWidth = $("#winSelector").width(); //选择器宽度
            var $divHeight = $("#winSelector").height(); //选择器高度
            var $imgWidth = $("#midimg").width(); //中图宽度
            var $imgHeight = $("#midimg").height(); //中图高度
            var $viewImgWidth = $viewImgHeight = $height = null; //IE加载后才能得到 大图宽度 大图高度 大图视窗高度

            function changeViewImg() {
                $("#bigView img").attr("src", $("#midimg").attr("src").replace("_m", ""));
            }
            changeViewImg();
            $("#bigView").scrollLeft(0).scrollTop(0);

            function fixedPosition(e) {
                if (e == null) {
                    return;
                }
                var $imgLeft = $("#midimg").offset().left; //中图左边距
                var $imgTop = $("#midimg").offset().top; //中图上边距
                X = e.pageX - $imgLeft - $divWidth / 2; //selector顶点坐标 X
                Y = e.pageY - $imgTop - $divHeight / 2; //selector顶点坐标 Y
                X = X < 0 ? 0 : X;
                Y = Y < 0 ? 0 : Y;
                X = X + $divWidth > $imgWidth ? $imgWidth - $divWidth : X;
                Y = Y + $divHeight > $imgHeight ? $imgHeight - $divHeight : Y;

                if ($viewImgWidth == null) {
                    $viewImgWidth = $("#bigView img").outerWidth();
                    $viewImgHeight = $("#bigView img").height();
                    if ($viewImgWidth < 200 || $viewImgHeight < 200) {
                        $viewImgWidth = $viewImgHeight = 800;
                    }
                    $height = $divHeight * $viewImgHeight / $imgHeight;
                    $("#bigView").width($divWidth * $viewImgWidth / $imgWidth);
                    $("#bigView").height($height);
                }
                var scrollX = X * $viewImgWidth / $imgWidth;
                var scrollY = Y * $viewImgHeight / $imgHeight;
                $("#bigView img").css({
                    "left": scrollX * -1,
                    "top": scrollY * -1
                });
                $("#bigView").css({
                    "top": 225,
                    "left": $(".preview").offset().left + $(".preview").width() + 10
                });

                return {
                    left: X,
                    top: Y
                };
            }
        });
//        $(document).ready(function () {
//            $('.goodbox-img').hide();
//            $('.tab-a:nth-child(1)').click(function () {
//                $(this).addClass('active');
//                $(this).siblings().removeClass('active');
//                $('.goodbox-img').show();
//                $('.eval-list').hide();
//            })
//            $('.tab-a:nth-child(2)').click(function () {
//                $(this).addClass('active');
//                $(this).siblings().removeClass('active');
//                $('.goodbox-img').hide();
//                $('.eval-list').show();
//            })
//        })
    </script>
</body>
</html>
